<link rel="stylesheet" href="__CDN__/assets/addons/xilujob/css/style.css" type="text/css">
<link rel="stylesheet" href="__CDN__/assets/addons/xilujob/css/reset.css" type="text/css">
<link href="__CDN__/assets/addons/xilujob/css/scroll-select.css" rel="stylesheet" />
<style>
    #benefits .item {border-color:#ccc;color:#000;}
    #benefits .item.active {border-color: #ff7100;color:#ff7100;}

    /* 屏幕宽度320px 375px */
    @media (width: 320px) and (width: 375px){
        .content{
            margin-left: 0;
        }
        .train-publish .t_select{
            width: 100%;
        }
        .train-publish .t_selectd{
            width: 100%;
        }
        .train-publish .t_selectd_price{
            width: 50%;
        }
        .train-publish .t_selectd_input{
            width: 50%;
        }
        .train-publish .t_selecta{
            width: 100%;
        }
        .train-publish .t_selectw{
            width: 100%;
        }
    }
    /* 屏幕宽度320px */
    @media (width: 320px){
        .content{
            max-width: 320px;
        }
    }
    /* 屏幕宽度375px */
    @media (width: 375px){
        .content{
            max-width: 375px;
        }
    }

    @media (width: 320px) and (max-width: 424px){
        .content{
            max-width: 420px;
            margin-left: 0;
        }
        .train-publish .t_select{
            width: 100%;
        }
    }

    .addr-box{
        display: flex;
        padding: 15px;
        border: 1px solid #E1E1E1;
        font-size: 16px;
        color: #333;
        font-weight: normal;
    }
    .addr-box input{
        margin: 0;
    }
    .addr-box .addr{
        margin-left: 15px;
        flex: 1;
    }

</style>

<div class="c_right_header">
    <div class="title active">发布职位</div>
</div>
<div class="c_right_list">
    <form id="job-form" class="train-publish">
        <input type="hidden" name="job[id]" value="{$job.id|default=''|htmlentities}" />
        <!-- 职位信息 -->
        <div class="train-publish_tit">职位信息</div>
        <div class="t_input clearfix">
            <div class="t_title">工作性质：</div>
            <div class="t_selectc">
                <div class="type-radio item {$job.type==1?'active':''}" style="cursor: pointer;"><input type="radio" name="job[type]" value="1" {$job.type==1?'checked':''} style="display: none;" /> 全职</div>
                <div class="type-radio item {$job.type==2?'active':''}" style="cursor: pointer;"><input type="radio" name="job[type]" value="2" {$job.type==2?'checked':''} style="display: none;" /> 兼职</div>
            </div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">职位名称：</div>
            <div class="t_select"><input id="c-job_name" data-rule="职位名称:required" maxlength="20" class="form-control" name="job[job_name]" type="text" value="{$job.job_name|htmlentities}" placeholder="请输入"></div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">职位类别：</div>
            <div class="t_select t_select_down">
                <input type="hidden" name="job[job_category_id]" data-rule="职位类别:required" value="{$job.job_category_id|htmlentities}" />
                <input id="select-category" type="text" placeholder="选择职位类别" value="{$job.job_category?$job.job_category.category_name:''}" readonly>
            </div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">职位人数：</div>
            <div class="t_select">
                <input type="text" name="job[num]" value="{$job.num|htmlentities}" placeholder="填写职位人数" data-rule="职位人数:required;integer(+)" data-msg-integer="职位人数请填写正整数" >
            </div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">薪资要求：</div>
            <div class="t_selectd">
                <div class="t_select_down t_selectd_price ul-selector" data-query=".handler">
                    <input id="c-salary_type" type="hidden" name="job[salary_type]" data-rule="选择薪资:required;" value="{$job.salary_type|htmlentities}" >
                    <input type="text" placeholder="请选择" readonly class="handler">
                    <ul class="t_select_menu options" style="display:none;">
                        <li value="0">面议</li>
                        <li value="1">时薪</li>
                        <li value="2">日薪</li>
                        <li value="3">月薪</li>
                    </ul>
                </div>
                <div id="salary-inputs" {if $job.salary_type==0}style="display:none;"{/if}>
                    <input name="job[salary_min]" data-rule="薪资下限:required(salaryInput);integer(+);" value="{$job.salary_min?:''}" type="text" placeholder="请输入" style="width:100px" class="t_selectd_input">
                    <span style="float: left;height:40px;line-height: 40px;">-</span>
                    <input name="job[salary_max]" data-rule="薪资上限:integer(+);salary_max" type="text" value="{$job.salary_max?:''}" placeholder="请输入" style="width:100px" class="t_selectd_input">
                </div>
            </div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">发布区域：</div>
<!--            <input type="hidden" name="job[city_id]" value="{$job.city_id|htmlentities}" />-->
            <div class="t_select t_select_down">
                <input type="hidden" data-rule="required;" data-msg="请选择发布区域" name="job[province_id]" value="{$job.province_id|htmlentities}">
                <input type="hidden" data-rule="required;" data-msg="请选择发布区域" name="job[city_id]" value="{$job.city_id|htmlentities}">
                <input type="hidden" data-rule="required;" data-msg="请选择发布区域" name="job[district_id]" value="{$job.district_id|htmlentities}">
                <input type="text" placeholder="请选择" class="handler" id="pick-area" readonly value="{if $job.district}{$job.province.name|htmlentities} - {$job.city.name|htmlentities} - {$job.district.name|htmlentities}{/if}">
            </div>
        </div>

        <div class="t_input clearfix" id="locations">
            <div class="t_title">工作地点：</div>
            <div class="t_selectw clearfix">
                <label class="addr-box">
                    <div class="t_btn">
                        <a href="javascript:;" class="btn" id="add-location" style="padding: 0;">添加工作地点</a></div>
                </label>
                {volist name="companyAddress" id="vo"}
                <label class="addr-box" for="addr{$key|htmlentities}">
                    <input type="radio" name="job[company_address_id]" id="addr{$key|htmlentities}" value="{$vo.id|htmlentities}" {in name="$vo.id" value="$job['locations'][0]['company_address_id']"}checked{/in} >
                    <div class="addr">
                        <p>{$vo.address_name|htmlentities}</p>
                        <p>{$vo.address|htmlentities}</p>
                    </div>
                    <button type="button" class="btn btn-danger del-location" data-id="{$vo.id|htmlentities}">删除</button>
                </label>
                {/volist}
            </div>
        </div>

        <div class="t_input clearfix">
            <div class="t_title">职位描述：</div>
            <div class="t_selecta"><textarea data-rule="职位描述:required;length(1~500)" maxlength="500" name="job[responsibility]" placeholder="输入职位描述">{$job.responsibility|htmlentities}</textarea></div>
        </div>
        <div class="t_input clearfix" id="benefits">
            <div class="t_title">企业福利：</div>
            <div class="t_selectw clearfix" id="items">
                {foreach $benefits as $benefit}
                <div style="cursor: pointer;" class="item type-checkbox {if in_array($benefit.id, $job.benefit_ids)}active{/if}"><input type="checkbox" name="job[benefit_ids][]" value="{$benefit.id|htmlentities}" style="display: none;" {if in_array($benefit.id, $job.benefit_ids)}checked{/if} /> {$benefit.name|htmlentities}</div>
                {/foreach}
                <br>
                <div style="cursor: pointer;" id="add-benefit" class="item">自定义</div>
            </div>
        </div>
        <!-- 职位要求 -->
        <div class="train-publish_tit">职位要求</div>
        <div class="t_input clearfix">
            <div class="t_title">学历要求：</div>
            <div class="t_select t_select_down ul-selector" data-query=".handler">
                <input type="hidden" name="job[education_level_id]" value="{$job.education_level_id|htmlentities}" data-rule="学历要求:required;" />
                <input type="text" placeholder="请选择" class="handler" readonly>
                <ul class="t_select_menu options" style="display:none;">
                    {foreach $education_levels as $level}
                    <li value="{$level.id|htmlentities}">{$level.name|htmlentities}</li>
                    {/foreach}
                </ul>
            </div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">工作年限：</div>
            <div class="t_select t_select_down ul-selector" data-query=".handler">
                <input type="hidden" name="job[work_experience_id]" value="{$job.work_experience_id|htmlentities}" data-rule="工作年限:required;" />
                <input type="text" placeholder="请选择" class="handler" readonly>
                <ul class="t_select_menu options" style="display:none;">
                    {foreach $work_experience_options as $option}
                    <li value="{$option.id|htmlentities}">{$option.name|htmlentities}</li>
                    {/foreach}
                </ul>
            </div>
        </div>
        <!-- 联系方式 -->
        <div class="train-publish_tit">联系方式</div>
        <div class="t_input clearfix">
            <div class="t_title">联系姓名：</div>
            <div class="t_select"><input data-rule="联系方式:required;length(1~20)" maxlength="20" name="job[contact_person]" type="text" value="{$job.contact_person|htmlentities}" placeholder="请输入"></div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">联系电话：</div>
            <div class="t_select"><input data-rule="联系电话:required;length(1~20)" maxlength="20" name="job[contact_phone]" type="text" value="{$job.contact_phone|htmlentities}" placeholder="请输入"></div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">联系邮箱：</div>
            <div class="t_select"><input data-rule="联系邮箱:email;length(1~40)" maxlength="40" name="job[contact_email]" type="text" value="{$job.contact_email|htmlentities}" placeholder="请输入"></div>
        </div>
        <!-- 其他要求 -->
        <div class="train-publish_tit">其他要求</div>
        <div class="t_input clearfix">
            <div class="t_title">红包招聘：</div>
            <div class="t_select"><input data-rule="红包招聘:integer(+)" maxlength="6" class="form-control" name="job[red_packet]" placeholder="元" type="text" value="{$job.red_packet?:''}"></div>
        </div>
        <div class="t_input clearfix">
            <div class="t_title">补贴说明：</div>
            <div class="t_selecta"><textarea data-rule="补贴说明:length(1~500)" maxlength="500" name="job[red_packet_instruction]" placeholder="输入补贴说明">{$job.red_packet_instruction|htmlentities}</textarea></div>
        </div>
        <div class="clearfix pt10">
            <label class="choice_box">
                <input data-rule="checked" data-msg="请阅读并同意《免责声明》" type="checkbox">
                <div class="choice">我已阅读并同意</div>
            </label>
            <a href="javascrpt:;" class="xieyi">免责声明</a>
        </div>

        <!-- 按钮 -->
        <div class="t_input clearfix">
            <div class="t_title"></div>
            <div class="t_btn">
<!--                <a href="javascript:;" class="btn3" id="btn-preview">预览</a>-->
                <a href="javascript:;" class="btn" id="btn-save" style="padding: 0;">{$job.id?'保存':'立即发布'}</a></div>
        </div>
    </form>
</div>

<div class="zz" style="display:none;"></div>
<div class="mask_xieyi" style="display:none;">
    <p class="mask_xieyi_title">免责声明</p>
    <div class="mask_xieyi_con">
        {$agreement.content|htmlentities}
    </div>
    <a href="javascript:;" class="btn mask_xieyi_btn">同意并继续</a>
</div>


<script type="text/html" id="location-template">
    <div class="location">
        <div class="t_title"></div>
        <div class="t_selectd" style="width:780px;">
            <input type="hidden" name="job[locations][][id]" value="" />
            <div style="width:305px;" class="t_select_down t_selectd_price">
                <input type="hidden" value="" name="job[locations][][province_id]">
                <input type="hidden" value="" name="job[locations][][city_id]">
                <input type="hidden" value="" data-rule="required" data-msg="选择工作地点区域" name="job[locations][][district_id]">
                <input type="text" placeholder="选择区域" readonly class="select-area" value="">
            </div>
            <input placeholder="填写详细地址" value="" maxlength="40" data-rule="详情地址:required" name="job[locations][][address]" style="width:470px" class="t_selectd_input">
        </div>
        <a href="javascript:" class="t_add btn-add-location">+</a>
        <a href="javascript:" class="t_add btn-remove-location">-</a>
    </div>
</script>

<script>
    var districts = {$districts|json_encode=JSON_UNESCAPED_UNICODE};
</script>
